<template>
    <div class="gOrderDetail" v-show="allData">
        <x-header title="订单详情" :left-options="{backText:''}" class="whiteHeader">
            <a :href="'tel:'+servicePhone" slot="right">
                <img src="../../assets/image/groupPurchase/service.png" alt="" />
            </a>
        </x-header>
        <div class="gOrderDetailStatus">
            <div class="orderTime">
                <p>下单时间:<span>{{allData.CREATE_TIME|filterTimess}}</span></p>
            </div>
            <div class="orderNo">
                <p>订单编号:<span>{{allData.ORDER_NO}}</span></p>
            </div>
            <div class="gOrderDetailStatus4" v-if='watchType!=0'>
                <p v-if='watchType==1' style="color:#F22E2E;">待付款</p>
                <p v-if='watchType==2' style="color:#FF8C05;">拼团中，已付款</p>
                <p v-if='watchType==3' style="color:#66CC22;">拼团成功，已付款</p>
                <p v-if='watchType==4' style="color:#66CC22;">拼团成功，待开奖 </p>
                <p v-if='watchType==5' style="color:#F22E2E;">一等奖，待收货</p>
                <p v-if='watchType==6' style="color:#999999;">拼团失败，退款中</p>
                <p v-if='watchType==7' style="color:#999999;">拼团失败，已退款</p>
                <p v-if='watchType==8' style="color:#F22E2E;">二等奖，退款中并送券</p>
                <p v-if='watchType==9' style="color:#F22E2E;">二等奖，已退款并送券</p>
                <p v-if='watchType==10' style="color:#66CC22;">拼团成功，待评价</p>
                <p v-if='watchType==11' style="color:#66CC22;">拼团成功，已完成</p>
            </div>
        </div>
        <div class="gOrderDetailUserInfo">
            <div class="userMess">
                <p>{{allData.CONTACT}}</p>
                <p>{{allData.PHONE}}</p>
            </div>
            <div class="userAddress">
                <p>{{allData.ADDRESS}}</p>
            </div>
        </div>
        <div class="orderDetailMess">
            <div class="shopName">
                {{allData.SHOP_NAME}}
            </div>
            <div class="shopDetailMess" v-for="item in goodsData">
                <div class="shopImg">                    
                    <img :src="item.COVER_IMG" alt="" />
                </div>
                <div class="shopMess">
                    <div class="shopT">
                        <h1>{{item.D_SUBJECT}}</h1><span>×{{item.QUANTITY}}</span>
                    </div>
                    <p class="remark">{{item.REMARK}}</p>
                    <div class="shopPrice">
                        <p>￥{{item.PRICE}}</p>
                        <s>￥{{item.ORIGINAL_PRICE}}</s>
                    </div>
                </div>
            </div>
            <div class="allPrice">
                商品金额：<label>￥</label><span>{{allData.allSum | filterMoney}}.</span><label>{{allData.allSum | filterMoney1}}</label>
            </div>
            <div class="discount" v-if="VOUCHERS_PRICE>0">
                <div class="discountMess">
                    <img src="../../assets/image/groupPurchase/ticket.png" alt="">
                    <p>减免金额</p>
                </div>
                <div class="discountPrice">-￥{{VOUCHERS_PRICE}}</div>
            </div>
            <div class="discount" v-if="TB_NUM">
                <div class="discountMess">
                    <img src="../../assets/image/groupPurchase/tong.png" alt="">
                    <p>使用{{TB_NUM}}通币</p>
                </div>
                <div class="discountPrice">-￥{{TB_NUM/1000}}</div>
            </div>
            <div class="discount" v-if="allData.ZERO_STATUS==1">
                <div class="discountMess">
                    <img src="../../assets/image/groupPurchase/oldUer.png" alt="">
                    <p>老用户开团成功,此商品免单</p>
                </div>
            </div>
            <div class="allShopPrice">
                总计:<label>￥</label><span>{{allData.TOTAL_PRICE | filterMoney}}.</span><label>{{allData.TOTAL_PRICE | filterMoney1}} </label>          
            </div>
            <div class="floeList" v-if='watchType==5||watchType==11||watchType==10'>
            <!--  -->
                <div class="floeListBtn" @click="goFlowList">
                    物流跟踪
                </div>
            </div>
            <div class="labels" v-if='watchType==6'>
               备注：退款会在1~3个工作日左右原路退回
            </div>
        </div>

        <div class="gOrderDetailFooter">
            <div class="gOrderDetailGoPT" v-if='watchType==1' @click='goCancel'><p>取消订单</p></div>
            <div class="gOrderDetailGoPT orderPay" v-if='watchType==1' @click="goPay(allData)">
                <p>支付(还剩<span v-if='(Number(downObj.D*24)+Number(downObj.H))>0'>{{Number(downObj.D*24)+Number(downObj.H)}}小时</span>{{Number(downObj.M)}}分{{downObj.S}}秒)</p>
            </div>
            <div class="gOrderDetailGoPT" v-if='watchType!=1' @click="goDetailPT(allData.GROUPON_USER_ID)">
                <p>拼团详情</p>
            </div>
            <div class="gOrderDetailGoEvaluate" v-if='watchType==10' @click="goEvaluate(allData)">
                <p>去评价</p>
            </div>
            <div class="gOrderDetailGoEvaluate" @click='goWining' v-if='watchType==5||watchType==8||watchType==9'>
                <p>开奖详情</p>
            </div>
        </div>
    </div>
</template>
<script>
    /*团购订单详情*/
    import { XHeader,Confirm } from 'vux';
    import { setCookie, getCookie } from '../../util/commonUtils';
    export default {
        name: "gOrderDetail",
        // 数据
        data() {

            return {
                userId: '',
                allData: '', //所有数据    
                goodsData: '', //商品数据
                servicePhone: '', //平台服务电话                  
                VOUCHERS_PRICE: 0, //抵用价格
                ORDER_ID: '', //订单id
                TB_NUM: '', //通币数
                flag: 1, //1-评价 0-追踪         
                downObj:{
                    D:0,
                    H:0,
                    M:0,
                    S:0
                },
                closeTimes:''            
            }
        },
        // 计算属性
        computed: {
            watchType(){
                if(this.allData.STATUS==2&&this.allData.PAY_STATUS==0){//待付款
                  return 1;
                }else if(this.allData.STATUS==2&&this.allData.PAY_STATUS==1&&(this.allData.GROUPON_TYPE==1||this.allData.GROUPON_TYPE==2||this.allData.GROUPON_TYPE==3)&&this.allData.GROUPON_STATUS==2){//拼团中，已付款
                  return 2;
                }else if(this.allData.STATUS==2&&this.allData.PAY_STATUS==1&&(this.allData.GROUPON_TYPE==1||this.allData.GROUPON_TYPE==3)&&this.allData.GROUPON_STATUS==1){//拼团成功，已付款
                  return 3;
                }else if(this.allData.STATUS==2&&this.allData.PAY_STATUS==1&&this.allData.GROUPON_TYPE==2&&this.allData.GROUPON_STATUS==1&&this.allData.PRIZE_STATUS==0){//拼团成功，待开奖
                  return 4;
                }else if(this.allData.STATUS==2&&this.allData.PAY_STATUS==1&&this.allData.GROUPON_TYPE==2&&this.allData.GROUPON_STATUS==1&&this.allData.PRIZE_STATUS==1&&this.allData.PRIZE_LEVEL==1){//拼团成功，已开奖
                  return 5;
                }else if(this.allData.STATUS==7&&this.allData.PAY_STATUS==1&&(this.allData.GROUPON_TYPE==1||this.allData.GROUPON_TYPE==2||this.allData.GROUPON_TYPE==3)&&this.allData.GROUPON_STATUS==0){//拼团失败，退款中
                  return 6;
                }else if(this.allData.STATUS==8&&this.allData.PAY_STATUS==1&&(this.allData.GROUPON_TYPE==1||this.allData.GROUPON_TYPE==2||this.allData.GROUPON_TYPE==3)&&this.allData.GROUPON_STATUS==0){//拼团失败，已退款
                  return 7;
                }else if(this.allData.STATUS==7&&this.allData.PAY_STATUS==1&&this.allData.GROUPON_TYPE==2&&this.allData.GROUPON_STATUS==1&&this.allData.PRIZE_STATUS==1&&this.allData.PRIZE_LEVEL>=2){//已开奖，退款中
                  return 8;
                }else if(this.allData.STATUS==8&&this.allData.PAY_STATUS==1&&this.allData.GROUPON_TYPE==2&&this.allData.GROUPON_STATUS==1&&this.allData.PRIZE_STATUS==1&&this.allData.PRIZE_LEVEL>=2){//已开奖，已退款
                  return 9;
                }else if(this.allData.STATUS==3&&this.allData.PAY_STATUS==1&&(this.allData.GROUPON_TYPE==1||this.allData.GROUPON_TYPE==2||this.allData.GROUPON_TYPE==3)&&this.allData.GROUPON_STATUS==1){//拼团成功，待评价
                  return 10;
                }else if(this.allData.STATUS==4&&this.allData.PAY_STATUS==1&&(this.allData.GROUPON_TYPE==1||this.allData.GROUPON_TYPE==2||this.allData.GROUPON_TYPE==3)&&this.allData.GROUPON_STATUS==1){//拼团成功，已评价
                  return 11;
                }
                // else if(this.allData.STATUS==2&&this.allData.PAY_STATUS==1&&this.allData.GROUPON_STATUS==0){////拼团失败，退款中
                //   return 6;
                // }
                else{
                  return 0;
                }
            }
        },
        // 创建（实例创建完成）
        created() {
            this.userId = getCookie('loginkey');
            this.ORDER_ID = this.$route.params.id;
            //团购订单详情
            this.$fetchPost('/ServOrderWeb/getOrderDetail', {
                USER_ID: this.userId,
                ORDER_ID: this.ORDER_ID
            }).then(
                res => {
                    if(res.RESULT_DATA.length>0){
                        this.allData = this.computedNumPrice(res.RESULT_DATA)[0];
                        this.servicePhone = res.SERV_PHONE;
                        if (this.allData.ACT_TYPE === 17092852) { //团购订单                                                  
                            this.goodsData = this.allData.DETAIL_LIST;
                            this.VOUCHERS_PRICE = this.allData.VOUCHERS_AMOUNT;
                            this.TB_NUM = this.allData.TB_NUM;            
                            //物流还是评价
                            if (this.allData.STATUS == 4 && this.allData.PAY_STATUS == 1) {
                                this.flag = 1;
                            } else {
                                this.flag = 1;
                            }
                        }
                        // 调用物流的接口
                        if(Number(res.RESULT_DATA[0].EXPNO)){
                            this.$fetchPost('/Logistics/logisticsRecordByExpNo.action',{EXPNO:res.RESULT_DATA[0].EXPNO}).then(res=>{
                            },err=>{});
                        }
                        if(this.allData.PAY_STATUS==0){
                            this.closeTimes=setInterval(()=>{
                                this.computerTime(this.allData.CLOSE_TIME);
                            },500)
                        }
                    }else{
                        let that=this;
                        this.$vux.confirm.show({
                          // 组件除show外的属性
                          title:'订单已关闭',
                          content:'订单因超出支付时间已被关闭，请返回重新参团支付',
                          'confirmText':'返回',
                          onCancel () {
                          },
                          onConfirm () {
                            that.$router.go(-1);
                          }
                        })
                    }
                }, err => console.log(err)
            );
        },
        // el被创建，并挂载到实例上
        mounted() {

        },
        // 方法（实例中的方法）-----------
        methods: {
            computedNumPrice(result){
              let arr=result;
              for(let i=0;i<arr.length;i++){
                let num=0;
                let firstClass=arr[i].DETAIL_LIST[0].FIRST_CLASS;
                let allSum=0;
                for(let j=0;j<arr[i].DETAIL_LIST.length;j++){
                  let sum=0;
                  sum+=Number(arr[i].DETAIL_LIST[j].PRICE);
                  num+=Number(arr[i].DETAIL_LIST[j].QUANTITY);
                  for(let m=0;m<arr[i].DETAIL_LIST[j].ATTR_LIST.length;m++){
                    sum+=Number(arr[i].DETAIL_LIST[j].ATTR_LIST[m].PRICE);
                  }
                  arr[i].DETAIL_LIST[j].sum=sum;
                  allSum+=sum;
                }
                arr[i].FIRST_CLASS=firstClass;
                arr[i].num=num;
                arr[i].allSum=allSum;
              }
              return arr;
            },
            //去评价
            goEvaluate(item) {
                localStorage.setItem('commentMess',JSON.stringify(item));
                this.$router.push('/comment/' + item.ORDER_ID);
            },
            //取消订单
            goCancel(){
                let that=this;
                this.$vux.confirm.show({
                  title:'提示',
                  content:'亲，你真的要取消订单',
                  onConfirm () {
                    that.$fetchPost('/ServOrderWeb/cancelOrder.action',{orderId:that.ORDER_ID,USER_ID:that.userId}).then(res=>{
                      if(res.STATUS_CODE==1){
                        that.$router.replace('/order/2');
                      }
                    },err=>{
                      console.log(err);
                    })
                  }
                })
            },
            //去支付
            goPay(item){
              let obj={};
              obj.address=[{}]
              obj.address[0].CONTACT=item.CONTACT;
              obj.address[0].PHONE=item.PHONE;
              obj.address[0].detailAddress=item.ADDRESS;
              obj.ORDER_ID=item.ORDER_ID;
              obj.USER_ID=this.userId;
              obj.VOUCHERS_AMOUNT=item.VOUCHERS_AMOUNT;
              obj.selectCars=[{}];
              obj.selectCars[0].LICENCE=item.CAR_NUMBER;
              obj.selectCars[0].BRAND=item.CAR_BRAND_NAME.split('_')[0];
              obj.selectCars[0].SET=item.CAR_BRAND_NAME.split('_')[1];
              obj.selectCars[0].MODEL=item.CAR_BRAND_NAME.split('_')[2];
              obj.sum=String(item.TOTAL_PRICE);
              obj.TB_NUM=item.TB_NUM;
              obj.ORDER_LIST=[];
              for(let i=0;i<item.DETAIL_LIST.length;i++){
                let objs={};
                objs.COMP_ID=item.COMP_ID;
                objs.SHOP_NAME=item.SHOP_NAME;
                objs.CASH_VOL_NO=item.VOUCHERS_NO;
                objs.SERV_PARAMS=[];
                let objss={};
                objss.SERV_ID=item.DETAIL_LIST[i].SERV_ID;
                objss.SERV_SUBJECT=item.DETAIL_LIST[i].D_SUBJECT;
                objss.PRICE=item.DETAIL_LIST[i].SINGLE_PRICE;
                objss.QUANTITY=item.DETAIL_LIST[i].QUANTITY;
                objss.SUPP_CASH_VOL=item.DETAIL_LIST[i].SUPP_CASH_VOL;
                objss.SUPP_DIS_VOL=item.DETAIL_LIST[i].SUPP_DIS_VOL;
                objss.SUPP_NOR_CASH_VOL=item.DETAIL_LIST[i].SUPP_NOR_CASH_VOL;
                objss.SERV_FIRST_CLASS=item.DETAIL_LIST[i].FIRST_CLASS;
                objss.SERV_SECON_CLASS=item.DETAIL_LIST[i].SECON_CLASS;
                objss.MARK=1;
                objss.ATTR_LIST=[];
                for(let j=0;j<item.DETAIL_LIST[i].ATTR_LIST.length;j++){//封装商品属性
                  let objsss={};
                  objsss.TYPE=item.DETAIL_LIST[i].ATTR_LIST[j].TYPE;
                  objsss.ATTRIBURE=item.DETAIL_LIST[i].ATTR_LIST[j].SERV_ID;
                  objss.PRICE=Number(objss.PRICE)+Number(item.DETAIL_LIST[i].ATTR_LIST[j].SINGLE_PRICE);
                  objss.ATTR_LIST.push(objsss);
                }
                objs.SERV_PARAMS.push(objss);
                obj.ORDER_LIST.push(objs);
              }
              sessionStorage.removeItem('orderMess');
              sessionStorage.removeItem('distribuVoucher');
              //存储支付页面需要的信息 
              sessionStorage.setItem('shopMess',JSON.stringify(obj));
              localStorage.setItem('from','order');//代表车品来自订单
              this.$router.push('/shopPay');
            },
            //去拼团详情
            goDetailPT(id) {
                this.$router.push('/groupDetail/' + id);
            },
            //去物流
            goFlowList() {
                this.$router.push('/flowList/');
            },
            //中奖详情
            goWining(){
                this.$router.push('/winingDetail/' + this.allData.ORDER_ID);
            },
            //过滤时间
            filterNum(num){
              return num>=10?num:'0'+num;
            },
            // 计算时间
            computerTime(closeTime){
              let times=new Date().getTime();//当前时间
              let D,H,M,S;
              let cTime;
              if(closeTime>0){
                cTime=closeTime;
              }
              let timeNum=cTime-times;
              if(timeNum>=0){
                D=parseInt(timeNum/(24*3600*1000));
                H=parseInt((timeNum-D*24*3600*1000)/(3600*1000));
                M=parseInt((timeNum-D*24*3600*1000-H*3600*1000)/(60*1000));
                S=parseInt((timeNum-D*24*3600*1000-H*3600*1000-M*60*1000)/1000);
              }else{
                D=0;
                H=0;
                M=0;
                S=0;
                clearInterval(this.closeTimes);
                let that=this;
                this.$vux.confirm.show({
                  // 组件除show外的属性
                  title:'订单已关闭',
                  content:'订单因超出支付时间已被关闭，请返回重新参团支付',
                  'confirmText':'返回',
                  onCancel () {
                    
                  },
                  onConfirm () {
                    that.$router.go(-1);
                  }
                })
              }
              D=this.filterNum(D);
              H=this.filterNum(H);
              M=this.filterNum(M);
              S=this.filterNum(S);
              this.downObj={
                D:D,
                H:H,
                M:M,
                S:S
              }
            }
        },
        // 子组件
        components: {
            XHeader,Confirm
        }
    }
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
    @import url('../../assets/css/public.less');
    .gOrderDetail {
        background: #efeef4;
        min-height: 100%;
        padding-bottom: 1.06rem;
        .labels{
            font-size: 0.25rem;
            width: 6.9rem;
            margin: 0 auto;
            padding: 0.3rem 0;
            text-align: left;
        }
        .whiteHeader {
            img {
                width: .44rem;
                height: .44rem;
            }
        }
        .orderDetailMess{
            width: 7.2rem;
            margin: 0 auto;
            background: #fff;
            border-radius: 0.2rem;
            .shopName{
                height: 0.9rem;
                font-size: 0.3rem;
                line-height: 0.9rem;
                color: #000;
                text-align: left;
                padding-left: 0.2rem;
                .borderBFu(#DADADA);
            }
            .shopDetailMess{
                display: flex;
                padding: 0.15rem 0 0 0;
                margin: 0 0.15rem;
                .borderBFu(#dadada);
                .shopImg{
                    min-width: 1.7rem;
                    img{
                        width: 1.7rem;
                        height: 1.5rem;
                    } 
                }
                .shopMess{
                    position: relative;
                    width: 100%;
                    .shopT{
                        display: flex;
                        justify-content:space-between;
                        h1{
                            font-size: 0.3rem;
                            color: #111111;
                            width: 4.5rem;
                        }
                        span{
                           font-size: 0.3rem;
                           color: #000; 
                        }
                    }
                    .remark{
                        font-size: 0.24rem;
                        color: #999999;
                    }
                    .shopPrice{
                        position:absolute;
                        bottom: 0.2rem;
                        left: 0rem;
                        display: flex;
                        align-items:baseline;
                        s{
                            font-size: 0.24rem;
                            color: #666;
                        }
                        p{
                            font-size: 0.26rem;
                            color: #0000;
                            padding-right: 0.1rem;
                        }
                    }
                }
            }
            .allPrice{
                height: 0.75rem;
                line-height: 0.75rem;
                text-align: right;
                font-size: 0.26rem;
                color: #333;
                margin: 0 0.3rem;
                border-bottom: 1px dashed #DADADA;
                label{
                    font-size: 0.24rem;
                }
                span{
                    font-size: 0.3rem;
                }
            }
            .discount{
                height: 0.8rem;
                display: flex;
                margin: 0 0.3rem;
                align-items:center;
                justify-content:space-between;
                border-bottom: 1px dashed #DADADA;
                padding: 0.18rem 0;
                .discountMess{
                    display: flex;
                    img{
                        width: 0.44rem;
                        height: 0.44rem;
                    }
                    p{
                        font-size: 0.28rem;
                        color: #222;
                        padding-left: 0.1rem;
                    }
                }
                .discountPrice{
                    font-size: 0.25rem;
                }
            }
            .allShopPrice{
                height: 0.8rem;
                font-size: 0.26rem;
                text-align: right;
                margin: 0 0.3rem;
                line-height: 0.8rem;
                color: #EC2121;
                span{
                    font-size:0.34rem; 
                }
            }
            .floeList{
                height: 0.8rem;
                align-item:center;
                display: flex;
                justify-content:flex-end;
                .borderTFu(#dadada);
                margin: 0 0.15rem;
                .floeListBtn{
                    width: 1.65rem;
                    height: 0.56rem;
                    line-height: 0.56rem;
                    border-radius: 0.1rem;
                    .borderFu(#999,.2rem);
                    margin:0.12rem 0.2rem 0 0;
                    font-size: 0.24rem;
                }
            }
        }
        .gOrderDetailStatus {
            width: 7.22rem;
            background: #fff;
            border-radius: .2rem;
            margin: .22rem auto;
            display: flex;
            flex-flow: column;
            .orderTime,.orderNo{
                text-align: left;
                margin: 0 0.1rem;
                padding:0.3rem 0.15rem;
                p{
                    font-size: 0.3rem;
                    color: #666;
                    span{
                        font-size: 0.28rem;
                        color: #000;
                    }
                }
            }
            .orderNo{
                .borderBFu(#dadada);
                padding-top: 0.1rem;
            }
            .gOrderDetailStatus4 {                
                height:.89rem;
                padding-left: .25rem;
                font-size: .26rem;
                color: #59c263;
                text-align: left;
                line-height: 0.89rem;
            }
        }
        .gOrderDetailUserInfo {
            width: 7.2rem;
            background: #fff;
            border-radius: .2rem;
            margin: .22rem auto;
            padding: 0.2rem;
            .userAddress,.userMess{
                display: flex;
                font-size: 0.26rem;
                color: #666666;
            }
            .userAddress{
                padding-bottom: 0.15rem;
            }
            .userMess{
                font-size: 0.3rem;
                color: #000;
                margin-bottom: 0.3rem;
                p:first-child{
                    padding-right: 0.8rem;
                }
            }
        }
        .gOrderDetailFooter {
            height: 1.06rem;            
            background: #fff;
            position: fixed;
            bottom: 0;
            width: 7.5rem;
            display: flex;
            align-items:center;
            justify-content:flex-end;
            .gOrderDetailGoPT {
                width: 2rem;
                height: .7rem;
                display: flex;
                justify-content: center;
                .borderFu(#ec2121,.2rem);
                margin-right: 0.15rem;
                p {
                    align-self: center;
                    font-size: .3rem;
                    color: #ec2121;
                }
            }
            .orderPay{
                width: auto;
                padding: 0 0.15rem;
                background: #ec2121;
                border-radius: 0.1rem;
                p{
                    color: #fff;
                }
            }
            .gOrderDetailGoEvaluate {
                width: 2rem;
                height: .7rem;
                display: flex;
                justify-content: center;
                border-radius: .1rem;
                background: #EC2121;
                margin-right: 0.15rem;
                p {
                    align-self: center;
                    font-size: .3rem;
                    color: #fff;
                }
            }
        }
    }
</style>